<template>
  <div>
    <el-row style="margin-left:300px;margin-top:180px">
      <el-col span="18">
        <el-card style="height:150px;margin-bottom:10px">
          <div>
            <img
              :src="userImg"
              alt=""
              style="border-radius:50%;width:13%;margin-left:20px"
            />
            <div style= "float:right;margin-right:70%;margin-top:-3%">
              <h1 style="font-size:30px;height:20px">{{ username }}</h1>
              <p>201808064322</p>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col span="8">
        <el-card style="height:150px;">
          <p><b>课程任务点</b></p>
          <p>{{ taskPoint }}</p>
        </el-card>
      </el-col>
      <el-col span="5">
        <el-card style="height:150px;margin-left:5%">
          <p><b>章节学习次数</b></p>
          <p>
            <strong>{{ studyNum }}次</strong>
          </p>
        </el-card>
      </el-col>
      <el-col span="5">
        <el-card style="height:150px;margin-left:5%">
          <p><b>课程积分</b></p>
          <p>
            <strong> {{ lessenPoint }}分</strong>
          </p>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      userImg: require("@/assets/css/images/panda.jpg"),
      taskPoint: "暂无数据",
      studyNum: 5,
      lessenPoint: 0,
    };
  },
  mounted() {
    var username = localStorage.getItem("key");
    var num = parseInt(localStorage.getItem("frequency"))
    this.studyNum = num + 1
    localStorage.setItem("frequency",this.studyNum)
    console.log(this.studyNum);
    this.username = username;
  },
};
</script>

<style lang="less" scoped>
.el-card {
  background-color: #dadde2;
  border-radius: 10px;
  box-shadow: 0 1px rgba(0, 0, 0, 0.15) !important;
}
/deep/.p {
  font-size: 25px;
}
</style>
